<template>
	<m-layout class="login " barBg="unset" color="#fff" :isShow="isShow">
		<m-block className="card-box align-center" style="width: 100%;" gap="64 24 80" spa="200 0 0">
			<m-icon type="logo2" wh="504 137"></m-icon>
			<view class="from-box ">
				<m-formItem spa="60 0 40">
					<view class="flex" slot="left">
						<m-icon color="#333" type="icon-youxiang" wh="38" spa="0 15 0 0 "></m-icon>
						<m-text ftsize="28" weight="bold" color="#333">手机号</m-text>
					</view>
					<m-input border="0" gap="20 15" v-model="phone" class="m-input " placeholder="请输入手机号" clear>
					</m-input>
				</m-formItem>
				<m-formItem spa="20 0 28">
					<view class="flex" slot="left">
						<m-icon color="#333" type="icon-suoding" wh="32" spa="0 15 0 0 "></m-icon>
						<m-text ftsize="28" weight="bold" color="#333">密码</m-text>
					</view>
					<m-input border="0" gap="20 15" type="password" v-model="password" class="m-input "
						placeholder="请输入输入密码"></m-input>
				</m-formItem>
				<view class="is-invcode flex-between">
					<text></text>
					<m-text color="#666666" @click="Jump('/pagesA/login/forgetPwd/forgetPwd')">忘记密码？</m-text>
				</view>
				<view class="btn-box">
					<m-button spa="10 0 0" block :loading="isLoading" ftsize="32" weight="bold"
						@click="verify">登录</m-button>
					<m-button hollow color="var(--theme)" ftsize="32" spa="20 0 0" block weight="bold"
						@click="Jump('/pagesA/login/register/register')">注册</m-button>
				</view>
			</view>
			<view class="flex" @click="ischeck = !ischeck">
				<m-icon :type="ischeck?'icon-xuanzhong_-01':'icon-weixuanzhong_-01-01'" wh="34" spa="0 10 0 0"
					color="var(--theme)"></m-icon>
				<m-text color="#999999">我已阅读并同意</m-text>
				<m-text color="var(--theme)" @click="Jump('/pagesA/news/detail/detail?code=yhxy')">《用户协议》</m-text>
			</view>
		</m-block>
		</view>
	</m-layout>
</template>

<script>
	import { login } from '@/api/Users.js'
	import { mapState } from 'vuex'
	export default {
		data() {
			return {
				isShow: false,
				isLoading: false,
				ischeck: true,
				code: '',
				phone: '',
				password: '',
			};

		},
		computed: {
			...mapState({

			}),
		},
		onLoad({ code }) {
			this.code = code;
			if (code == 'back') {
				this.isShow = true
			}
			this.init()
		},
		methods: {
			verify() {
				if (!this.phone) {
					return this.Toast('请输入手机号')
				}
				if (!this.password) {
					return this.Toast('请输入密码')
				}
				if (!this.ischeck) {
					return this.Toast('请阅读并同意相关协议')
				}
				this.login()
			},
			async login() {
				this.isLoading = true;
				const { success, msg } = await login({
					username: this.phone,
					password: this.password
				})
				this.isLoading = false;
			},
			async getPhoneNumber(data) {
				const { detail: { encryptedData, iv, code } } = data;


				console.log('login-invcode', this.Cookie.get('Invcode'))
				const { msg, success } = await BindPhone({
					authcode: code,
					openid_authcode: this.code,
					invcode: this.Cookie.get('Invcode')
				})
				this.Toast(msg)
				if (success) {
					await this.sleep(500)
					this.Jump({
						url: "/pages/home/home",
						mode: 4,
					})
				}

			},
			async init() {

			},
		},
		onPullDownRefresh() {
			this.init();
		},
	}
</script>

<style lang="scss">
	.from-box {
		text-align: left;
		height: 100%;
		// background: #FFFFFF;
		border-radius: 40rpx;
		padding: 50rpx 00rpx;

		.form-head {
			padding-bottom: 24rpx;
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #fff;
		}

		.m-input {
			border: unset;
			border-radius: 20rpx;
			padding: 30rpx 30rpx !important;
			justify-content: flex-start;
			align-items: flex-start;
		}
	}

	.login {
		box-sizing: border-box;
		height: 100vh;
		background: url('https://files.hcypai.com/static/imgs/loginbg.png') #856BFF;
		background-size: 100% 100%;

	}

	.getPhone {
		width: 100%;
		margin: 100rpx 0 90rpx;
		display: inline-block;
		border-width: 0.5px;
		border-style: solid;
		border-color: var(--theme);
		border-image: initial;
		font-size: 26rpx;
		font-family: "PingFang SC", "PingFang SC";
		padding: 20rpx 34rpx;
		border-radius: 10rpx;
		transform: rotate(0deg);
		background: var(--theme);
		color: #fff;
		line-height: unset;

		&::after {
			display: none;
		}

	}

	.card-box {
		width: 100%;
	}

	button[disabled]:not([type]) {
		background: var(--theme) !important;
		cursor: not-allowed !important;
		color: #fff !important;
		opacity: 0.7;

		&:before {
			display: none !important;
		}
	}
</style>